let carList = document.querySelector(".carList");
//刷新购物车列表
async function refershShopCar() {
  let shopCarAPI = "http://jx.xuzhixiang.top/ap/api/cart-list.php";
  let uid = localStorage.getItem("uid");
  let params = {
    id: uid,
  };
  let { data } = await axios.get(shopCarAPI, { params });
  //   console.log(data);
  let shopArr = data.data; //拿到用户购物车里的商品
  //   console.log(data.data.data);
  //   console.log(arr);
  //遍历并拼接字符串，然后将商品信息输出到页面上
  let str = "";
  shopArr.forEach((obj) => {
    // console.log(obj);
    str += `<li>
    <div class="left">
      <input type="checkbox" class="aloneSelect" onchange="aloneCK(this)"/>     
      <a href="detail.html?pid=${obj.pid}&pname=${obj.pname}"><img src="${
      obj.pimg
    }"/></a>
      <div>
        <p>${obj.pname}</p>
        <p>${obj.pdesc}</p>
      </div> 
    </div>
    <div>￥<span class="pprice">${obj.pprice}</span></div>
    <div>
      <p class="flex num">
      <a class="sub" pid="${obj.pid}">-</a>
      <input class="iptNum" type="number" name="" min="1" value="${
        obj.pnum
      }" oninput="changeNum(${obj.pid},this)"/>
      <a class="add" pid="${obj.pid}">+</a>
      </p>  
    </div>
    <div>
      <span class="iconfont icon-shanchu" onclick="delShop(${
        obj.pid
      },this)"></span>
    </div>
    <div>￥<span class="pSum">${(obj.pprice * obj.pnum).toFixed(2)}</span></div>
   </li>`;
  });
  carList.innerHTML = str;
  //数量改变时，计算此商品的总价格，数量*单价
  let addArr = document.querySelectorAll(".add"); //获取增加按钮
  addArr.forEach((item, index) => {
    item.onclick = () => {
      item.previousElementSibling.value =
        parseInt(item.previousElementSibling.value) + 1;
      let priceSum =
        item.parentElement.parentElement.nextElementSibling.nextElementSibling
          .firstElementChild;
      // console.log(priceSum);
      let price =
        item.parentElement.parentElement.previousElementSibling
          .firstElementChild.innerHTML;
      let num = parseInt(item.previousElementSibling.value);
      console.log(num, price);
      priceSum.innerHTML = parseInt(price * num).toFixed(2);
      console.log(priceSum.innerHTML);
      //修改数量API
      console.log(item.getAttribute("pid"));
      changeNum(item.getAttribute("pid"), num);
    };
  });
  let subArr = document.querySelectorAll(".sub"); //获取减少按钮
  subArr.forEach((item, index) => {
    item.onclick = () => {
      if (item.nextElementSibling.value > 1) {
        item.nextElementSibling.value =
          parseInt(item.nextElementSibling.value) - 1;
        let priceSum =
          item.parentElement.parentElement.nextElementSibling.nextElementSibling
            .firstElementChild;
        // console.log(priceSum);
        let price =
          item.parentElement.parentElement.previousElementSibling
            .firstElementChild.innerHTML;
        let num = parseInt(item.nextElementSibling.value);
        console.log(num, price);
        priceSum.innerHTML = parseInt(price * num).toFixed(2);
        console.log(priceSum.innerHTML);
        //修改数量API
        console.log(item.getAttribute("pid"));
        changeNum(item.getAttribute("pid"), num);
      }
    };
  });
  //定义修改数量的函数
  async function changeNum(pid, pnum) {
    let changeNumAPI = "http://jx.xuzhixiang.top/ap/api/cart-update-num.php";
    let uid = localStorage.getItem("uid");
    console.log(uid);
    // let num = change.value; //change代表获取到的this
    // console.log(num);
    let params = {
      uid: uid,
      pid: pid,
      pnum: pnum,
    };
    //   console.log(params);
    let { data } = await axios.get(changeNumAPI, { params });
    console.log(data);
  }
}
refershShopCar();
//删除购物车里的商品
async function delShop(pid, btn) {
  //btn 代表的是this，拿到自身
  //   console.log(pid);
  if (confirm("是否要删除")) {
    let uid = localStorage.getItem("uid");
    let delShopAPI = "http://jx.xuzhixiang.top/ap/api/cart-delete.php";
    let params = {
      uid: uid,
      pid: pid,
    };
    //   console.log(params);
    let { data } = await axios.get(delShopAPI, { params });
    console.log(data);
    refershShopCar();
    document.querySelector(".allSelect").checked = false;
    document.querySelector("#priceSum").innerHTML = 0.0;
    document.querySelector("#countSum").value = "去结算";
  }
}
//修改购物车里的商品数量
// async function changeNum(pid, change) {
//   //   console.log(pid, change);
//   let changeNumAPI = "http://jx.xuzhixiang.top/ap/api/cart-update-num.php";
//   let uid = localStorage.getItem("uid");
//   let num = change.value; //change代表获取到的this
//   //   console.log(num);
//   let params = {
//     uid: uid,
//     pid: pid,
//     pnum: num,
//   };
//   //   console.log(params);
//   let { data } = await axios.get(changeNumAPI, { params });
//   console.log(data);
// }
//实现全选和单选效果
function allCK() {
  let allSelect = document.querySelector(".allSelect");
  console.log(allSelect.checked);
  let aloneSelect = document.querySelectorAll(".aloneSelect");
  // console.log(aloneSelect);
  //将伪数组aloneSelect转换成数组
  let aloneSelectArr = [...aloneSelect];
  // console.log(aloneSelectArr);
  aloneSelectArr.forEach((item) => {
    // console.log(item);
    if (allSelect.checked == true) {
      item.checked = true;
    } else {
      item.checked = false;
    }
  });
  count();
}
function aloneCK(me) {
  // console.log(me.checked);
  let allSelect = document.querySelector(".allSelect");
  let aloneSelect = document.querySelectorAll(".aloneSelect");
  // console.log(aloneSelect);
  //将伪数组aloneSelect转换成数组
  let aloneSelectArr = [...aloneSelect];
  //判断所有的单选是不是true，是true，则全选为true
  let flag = aloneSelectArr.every((item) => {
    return item.checked == true;
  });
  console.log(flag);
  if (flag) {
    allSelect.checked = true;
  } else {
    allSelect.checked = false;
  }
  count();
}
//计算选中商品的总数和总价
function count() {
  let aloneSelect = document.querySelectorAll(".aloneSelect");
  let aloneSelectArr = [...aloneSelect];
  // 定义初始价格和初始数量
  let priceSum = 0;
  let countSum = 0;
  aloneSelectArr.forEach((item) => {
    // console.log(item);
    //获取价格
    // console.log(item.parentNode.nextElementSibling.children[0].innerHTML);
    // console.log(
    //   item.parentNode.nextElementSibling.nextElementSibling.children[0].value
    // );
    if (item.checked) {
      let price = item.parentNode.nextElementSibling.children[0].innerHTML;
      let num =
        item.parentNode.nextElementSibling.nextElementSibling.children[0]
          .children[1].value;
      // console.log(price, num);
      let priceTotal = price * num;
      // console.log(priceTotal);
      priceSum += priceTotal;
      countSum += parseInt(num);
    }
  });
  console.log(priceSum, countSum);
  document.querySelector("#priceSum").innerHTML = priceSum.toFixed(2);
  document.querySelector("#countSum").value = "去结算" + "(" + countSum + ")";
}
